<!-- 柱状图 -->
<template>
  <div class="wrap">
    <span class="title">top <span>10 </span> 最近加速用户排名</span>
    <div
      ref="barchart"
      id="chart1"
      :style="{ height: height, width: width }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { connrequest } from "@/api/firstPage";
import { getNowDay } from "@/utils/index.js";
export default {
  data() {
    return {
      width: "100%",
      height: "350px",
      dataList: []
    };
  },
  props: {
    title: {
      type: String,
      default: "显示日统计趋势"
    }
    // width: {
    //   type: String,
    //   default: '100%'
    // },
    // height: {
    //   type: String,
    //   default: '350px'
    // },
    // chartData: {
    //   type: Object,
    //   required: true
    // }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.barchart, "macarons");
    this.getData();
  },
  methods: {
    async getData() {
      let NowDay = getNowDay("time");
      const data = {
        Filter: {
          StartTime: NowDay,
          EndTime: "",
          AccessType: 2,
          SumCount: 9
        }
      };
      const res = await connrequest("GetShadowURLSumGroupByUser", data);
      if (res.Data) {
        this.$nextTick(() => {
          let xAxis = [];
          let series = [];
          res.Data.map((item) => {
            xAxis.push(item.Name);
            series.push(item.Count.toFixed(2));
            return item;
          });
          this.dataList = { xAxis, series };
          this.setOptions(this.dataList);
        });
      } else {
        this.$nextTick(() => {
          const dom = document.getElementById("chart1");
          dom.innerHTML =
            '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
          dom.removeAttribute("_echarts_instance_");
        });
      }
    },
    setOptions(chartData) {
      let colorList = [
        "#63ace5",
        "#f9dc5c",
        "#b8e994",
        "#ff7272",
        "#ffa931",
        "#85a392",
        "#9174d7",
        "#f78fb3",
        "#cc8e35",
        "#f19066"
      ];
      let seriesData = chartData.series.map((item, index) => {
        return {
          value: item,
          itemStyle: {
            color: "#5f91a8"
          }
        };
      });
      this.myChart.setOption({
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          inverse: true, //倒叙
          data: chartData.xAxis,
          axisLabel: {
            show: true,
            formatter: function (value) {
              var texts = value;
              if (texts.length > 15) {
                // 具体多少字就看自己了
                texts = texts.substr(0, 15) + "...";
              }
              return texts;
            }
          },
          splitLine: {
            lineStyle: {
              color: "#666", // 修改网格线颜色为浅灰色
              type: "dashed", // 添加虚线效果
              width: 1 // 线条宽度
            }
          }
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "#fff",
          formatter: function name(params) {
            return `${params.name}： ${params.value}KB/S`;
          }
        },
        series: [
          {
            data: seriesData,
            type: "bar",
            barWidth: 25,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#5f91a8",
                    fontSize: 14
                  }
                }
              }
            }
          }
        ],
        grid: {
          left: 100 // 调整这个属性
          // top: 15,//拉伸距离顶部高度
          // bottom: 0,//拉伸距离底部高度
        },
        color: colorList
      });
      this.myChart.on("mouseover", function (e) {
        const component = e.componentType;
        const value = e.value;
        const offsetX = e.event.offsetX;
        const offsetY = e.event.offsetY;
        if (component === "yAxis") {
          $("#chart1").find(".echarts_tip").remove();
          $("#chart1").append(`
							<div class="echarts_tip" style="top:${offsetY}px;left:${offsetX}px;">
								${value}
							</div>
						`);
        }
      });
      this.myChart.off("click");
      this.myChart.on("mouseout", function (e) {
        const component = e.componentType;
        if (component === "yAxis") {
          $("#chart1").find(".echarts_tip").remove();
        }
      });
    }
  }
};
</script>
<style scoped>
.echarts_tip {
  position: absolute;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px 20px;
}
.wrap {
  height: calc(50vh - 50px) !important;
  overflow: hidden;
}
</style>